import React from 'react'
import { connect } from 'dva';

import {
    Button, message, InputNumber, Input, Form, Upload, Icon, Select, Switch
} from 'antd';
import './AppGlobalConfig.less';
import { UrlConfig, getConfig, updateConfig } from '../../../services/fetch';
import { getBase64, beforeImgUpload, beforeVideoUpload } from '../../../utils/request';
const { Option } = Select;
const { TextArea } = Input;
@Form.create()
@connect(({ add }) => ({
    add: add
}))
export default class AppGlobalConfig extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            imageUrl: '',
            loading: '',
            permission: []
        }
    }

    componentDidMount() {
        getConfig().then((res) => {
            if (res.data.code == 200) {
                // console.log(res);
                this.setState({
                    config_json: res.data.data.config_json
                })
                this.props.form.setFieldsValue(res.data.data.config_json)
            }
        })
        this.setState({
            permission: JSON.parse(localStorage.getItem('permissionzx')) || []
        })
    }

    submit = () => {
        this.props.form.validateFields((err, values) => {
            console.log(err);
            if (err) {
                return message.error('固定版面数最大值不能大于3')
            }
            if (values.fixed_plate_count < values.default_show_plate_count) {
                return message.error('默认展示版面数量必须小于或等于固定版面数量')
            }
            console.log(typeof values.fixed_plate_count);

            let str = ''
            if (Array.isArray(values.scan_white_list)) {
                str = values.scan_white_list.join(',')
            } else {
                str = values.scan_white_list
            }
            values.scan_white_list = str.replace(/，|\n/g, ',').split(",")
            let obj = { ...this.state.config_json, ...values };
            let data = {
                config_id: 1,
                config_json: obj
            }
            updateConfig(data).then((res) => {
                if (res.data.code == 200) {
                    message.success('保存成功!');
                }
            })
            // console.log(values);
        })
    }

    /**
     * 上传插件
     */
    fcUpload = (key) => {
        window.fc = new window.FcUpload({
            elem: 'fcUpload',
            oss: this.props.add.configJson.aliyunOssSwitch,       //是否为oss 上传
            multiple: false,  //是否允许上传多个文件
            type: 'img', // 上传文件类型\ img 图片，  video 视频
            offWaterMark: true,// 上传头像关闭
            actionImg: `${UrlConfig}/fcpublic/uploads/uploadImg`,  //本地上传图片地址
            actionVideo: `${UrlConfig}/fcpublic/uploads/uploadVideo`,  //本地上传视频地址
            actionOss: this.props.add.configJson.actionOss,  //后端认证接口，获取临时上传凭证
            endpoint: this.props.add.configJson.endpoint,
            bucket: this.props.add.configJson.bucket,
            customDomain: this.props.add.configJson.customDomain,
            ossConfig: this.props.add.configJson,
            callback: (callRes) => {
                let url;
                if (callRes.oss) {  // oss 和本地返回数据结构不一样
                    url = callRes.response[0];
                } else {
                    url = callRes.response[0].data;
                }
                let obj = {};
                obj[key] = url;
                this.props.form.setFieldsValue(obj);
            }
        })

        window.fc.show();
    }

    render() {

        const {
            getFieldDecorator
        } = this.props.form;

        const formValues = this.props.form.getFieldsValue();
        console.log(formValues);

        return (
            <section className="AppGlobalConfig">
                <header>
                    APP全局配置
                </header>
                <div className='content'>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">官方站点名称</div>
                            <div className="t2">APP内容发布展示发布者的名称，建议在10个字以内</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('appSiteName')(
                                <Input />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">官方站点LOGO</div>
                            <div className="t2">APP内容发布展示发布者的LOGO，LOGO建议尺寸100*100，建议比例1:1，并小于100kb</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('siteLogo', {
                                getValueFromEvent: (info) => {
                                    return this.handleImgChange(info, 'siteLogoLoading');
                                },
                            })(
                                <img onClick={() => { this.fcUpload('siteLogo') }} style={{ width: 100, height: 100 }} src={formValues['siteLogo']} className="thumb" alt="封面图" />
                            )}
                        </div>
                    </div>
                    {this.state.permission.indexOf('info_unify_logo') > -1 &&
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">是否启用全局分享logo</div>
                                <div className="t2">开启全局分享logo后， 所有分享logo由文章封面图变成全局logo</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('shareLogoSwitch', { valuePropName: 'checked', })(
                                    <Switch onChange={(e) => {
                                        if (!e) {
                                            this.props.form.setFieldsValue({
                                                shareLogo: ''
                                            })
                                        }
                                    }} checkedChildren="启用" unCheckedChildren="关闭" />
                                )}
                            </div>
                        </div>
                    }

                    <div className={formValues.shareLogoSwitch ? '' : 'none'}>
                        <div className="item" >
                            <div className="i-left">
                                <div className="t1">分享LOGO</div>
                                <div className="t2">分享LOGO，LOGO建议尺寸100*100，建议比例1:1，并小于100kb</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('shareLogo', {
                                    getValueFromEvent: (info) => {
                                        return this.handleImgChange(info, 'shareLogoLoading');
                                    },
                                    initialValue: ''
                                })(
                                    <img onClick={() => { this.fcUpload('shareLogo') }} style={{ width: 100, height: 100 }} src={formValues['shareLogo'] || '/application/fcpublic/resource/images/default.png'} className="thumb" alt="封面图" />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">站点首页-顶部LOGO</div>
                            <div className="t2">APP首页顶部站点LOGO，LOGO建议尺寸195*69，并小于1M，由于APP顶部有主题背景色，建议为透明背景的反白稿图标</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('siteHomeLogo', {
                                getValueFromEvent: (info) => {
                                    return this.handleImgChange(info, 'siteHomeLogoLoading');
                                },
                            })(
                                <img onClick={() => { this.fcUpload('siteHomeLogo') }} style={{ width: 195, height: 69 }} src={formValues['siteHomeLogo']} className="thumb" alt="封面图" />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">站点首页-矩阵号图标</div>
                            <div className="t2">APP首页顶部左脚上矩阵号图标，LOGO建议尺寸54*39，并小于50kb，由于APP顶部有主题背景色，建议为透明背景的反白稿图标</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('matrixLogo', {
                                getValueFromEvent: (info) => {
                                    return this.handleImgChange(info, 'matrixLogoLoading');
                                },
                            })(
                                <div onClick={() => {
                                    this.fcUpload('matrixLogo')
                                }}>
                                    <img style={{ width: 54, height: 39 }} src={formValues['matrixLogo']} className="thumb" alt="封面图" />
                                </div>
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">站点首页-矩阵号入口开关</div>
                            <div className="t2">APP首页顶部左脚上矩阵号图标</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('matrixSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">显示编辑</div>
                            <div className="t2">详情页面是否显示编辑</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('editorSwitch', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">显示记者</div>
                            <div className="t2">详情页面是否显示记者</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('reporterSwitch', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">显示作者</div>
                            <div className="t2">详情页面是否显示作者</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('authorSwitch', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">显示分类</div>
                            <div className="t2">详情页面是否显示分类</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('classSwitch', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">Android下载地址</div>
                            <div className="t2">请输入正确的安卓下载链接</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('androidUrl')(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">IOS下载地址</div>
                            <div className="t2">请输入正确的IOS下载链接</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('iosUrl')(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">微信公众号AppId</div>
                            <div className="t2">用于微信分享、授权等相关功能（需要先在微信公众号后台配置相关参数）</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('weixinAppId')(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">微信公众号AppSecret</div>
                            <div className="t2">用于微信分享、授权等相关功能（需要先在微信公众号后台配置相关参数）</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('weixinAppSecret')(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">微信分享页面是否开启微信授权</div>
                            <div className="t2">请联系开发者配置好微信授权参数之后才能开启</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isWeixinAuthorize', { valuePropName: 'checked', initialValue: false })(
                                <Switch checkedChildren="是" unCheckedChildren="否" />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">微信分享页面是否必须登录才能观看</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isLoginRequire', { valuePropName: 'checked', initialValue: false })(
                                <Switch checkedChildren="是" unCheckedChildren="否" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">直播使用版本</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('live_version')(
                                <Input />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">APP顶部功能配置</div>
                            <div className="t2">可选择客户端顶部功能布局模板</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('topStyle')(
                                <Select style={{ width: 120 }}>
                                    <Option value={1}>经典样式</Option>
                                    <Option value={2}>扫码服务</Option>
                                    <Option value={3}>天气服务</Option>
                                    <Option value={4}>日历服务</Option>
                                    <Option value={5}>拍照服务</Option>
                                </Select>
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否启用媒体号</div>
                            <div className="t2">启用之后APP媒体号的展示不一样</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isEnableMedia', { valuePropName: 'checked' })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否显示评论量</div>
                            {/* <div className="t2">启用之后APP媒体号的展示不一样</div> */}
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isEnableCommentNum', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否显示点赞量</div>
                            {/* <div className="t2">启用之后APP媒体号的展示不一样</div> */}
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isEnableLikeNum', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否显示浏览量</div>
                            {/* <div className="t2">启用之后APP媒体号的展示不一样</div> */}
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isEnableScanNum', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
                            )}
                        </div>
                    </div>

                    {/*<div className="item">*/}
                    {/*    <div className="i-left">*/}
                    {/*        <div className="t1">是否显示点赞量和观看量</div>*/}
                    {/*        <div className="t2">可控制详情页点赞量和观看量</div>*/}
                    {/*    </div>*/}
                    {/*    <div className="i-right">*/}
                    {/*        {getFieldDecorator('isShowThumbsOrWatch', { valuePropName: 'checked', initialValue: true })(*/}
                    {/*            <Switch checkedChildren="开" unCheckedChildren="关" />*/}
                    {/*        )}*/}
                    {/*    </div>*/}
                    {/*</div>*/}

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否开启点赞不限制</div>
                            <div className="t2">开启后点赞不需要登录，可以无限点赞</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isNORestrictThumbs', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">固定前n个版面</div>
                            <div className="t2">启用之后APP上前n个版面固定(最大值不能大于3)</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('fixed_plate_count', {
                                initialValue: 1,
                                rules: [{ pattern: new RegExp(/1|2|3/), message: "最大值不能大于3" }]
                            })(
                                <InputNumber min={1} style={{ width: "100%" }} />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">默认展示第m个版面</div>
                            <div className="t2">启用之后APP默认展示第m个版面</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('default_show_plate_count', {
                                initialValue: 1
                            })(
                                <InputNumber min={1} style={{ width: "100%" }} />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">扫一扫白名单</div>
                            <div className="t2">启用之后APP根据白名单判断是否允许打开(输入时以逗号","分隔)</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('scan_white_list', {
                                initialValue: ''
                            })(
                                <TextArea rows={4} placeholder="请输入白名单网址..." />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">字体颜色</div>
                            <div className="t2">十六进制字体颜色，以“#”号开始</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('font_color', {
                                initialValue: ''
                            })(
                                <Input placeholder="请输入十六进制颜色" style={{ width: "100%" }} />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">APP浏览器Agent</div>
                            <div className="t2">APP浏览器Agent</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('webview_userAgent', {
                                initialValue: ''
                            })(
                                <Input style={{ width: "100%" }} />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">app主题色</div>
                            <div className="t2">app主题色，十六进制颜色，以“#”号开始</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('theme_color', {
                                initialValue: ''
                            })(
                                <Input style={{ width: "100%" }} />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">app辅助色</div>
                            <div className="t2">app辅助色，十六进制颜色，以“#”号开始</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('sub_color', {
                                initialValue: ''
                            })(
                                <Input style={{ width: "100%" }} />
                            )}
                        </div>
                    </div>
                    {this.state.permission.indexOf('info_tag') > -1 &&
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">app标签色</div>
                                <div className="t2">app标签，十六进制颜色，以“#”号开始</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('tag_color', {
                                    initialValue: ''
                                })(
                                    <Input style={{ width: "100%" }} />
                                )}
                            </div>
                        </div>
                    }
                    <div className="item unline">
                        <Button type="primary" onClick={this.submit}>保存</Button>
                    </div>
                </div>
            </section>
        )
    }
}

